<!--
 * @Author: your name
 * @Date: 2021-04-20 15:06:41
 * @LastEditTime: 2021-04-21 15:14:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue03-demo\src\App.vue
-->
<template>
  <router-link to="/">home</router-link>
  <br>
  <router-link to="/ref">ref</router-link>
  <br>
  <teleport to="#end-of-body" :disabled="!toggle">
    hello teleport to end of
  </teleport>
  <div>this should be at the top.</div>
  <button type="type" @click="toggleHandle">toggleHandle</button>
  <router-view/>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    const toggle = ref(false)

    const toggleHandle = () => {
      toggle.value = !toggle.value
    }

    return {
      toggleHandle,
      toggle
    }
  }
}
</script>

<style>
</style>
